// 描述座位
class Seat{
  constructor(x,y){
    this.x=x
    this.y=y
    // 0:未分配 1:普通座位 2:过道
    this.type=0
    // 指定当前是否为选中状态
    this.selected=false
  }
}
// 描述座位选择模板
class SeatSelector{
// 构造器
constructor(rows,cols,canvasId){
  this.rows=rows
  this.cols=cols
  this.canvas=document.getElementById(canvasId)
  this.cvs=this.canvas.getContext('2d')
  // 自定义属性
  // 指定每一个座位的宽高 像素值
  this.seatSize=20
  // 每个座位距离 像素值
  this.margin=5
  // 初始化座位模板
  this.seats=[]
  for(let i=0;i<rows;i++){ 
    let row=[]
    for(let j=0;j<cols;j++){
     row[j]=new Seat(i,j)
    }
    this.seats[i]=row
  }
  // 为canvas初始化 width和height
  this.canvas.width=cols*this.seatSize+(cols+1)*this.margin
  this.canvas.height=rows*this.seatSize+(rows+1)*this.margin
  this.canvas.style.display='block'
  // 为canvas绑定事件
  this.canvas.addEventListener('mousedown',(event)=>{
    // 获取矩形区域
    let rect=this.canvas.getBoundingClientRect()
    let x=event.clientX-rect.left
    let y= event.clientY-rect.top
    // console.log(x,y);
    // 记录一个起始坐标点
    this.startPoint={x,y}
  })
  this.canvas.addEventListener('mouseup',(event)=>{
    // 获取矩形区域
    let rect=this.canvas.getBoundingClientRect()
    let x=event.clientX-rect.left
    let y= event.clientY-rect.top
    // 记录一个起始坐标点
    this.endPoint={x,y}
    // console.log('start:',this.startPoint,'end:',this.endPoint);
    // 根据起始点和结束点 整理一个矩形对象(x1y1,x2y2)左上角和右下角
    let selectRect={
      x1:Math.min(this.startPoint.x,this.endPoint.x),
      y1:Math.min(this.startPoint.y,this.endPoint.y),
      x2:Math.max(this.startPoint.x,this.endPoint.x),
      y2:Math.max(this.startPoint.y,this.endPoint.y)
    }
    console.log(selectRect);
    // 判断座位是否在选择框内 如果在则改变选中状态 selected
    for(let i=0;i<this.rows;i++){
      for(let j=0;j<this.cols;j++){
        // 获取每一个座位
        let seat=this.seats[i][j]
        // 计算上下左右边界值
        let top=i*this.seatSize+(i+1)*this.margin
        let bottom=(i+1)*this.seatSize+(i+1)*this.margin
        let left=j*this.seatSize+(j+1)*this.margin
        let rigth=(j+1)*this.seatSize+(j+1)*this.margin
        // 判断座位边界是否在选中框内
        if(top>selectRect.y2 || left>selectRect.x2 ||bottom <selectRect.y1 || rigth<selectRect.x1){
          // 没框到座位
        }else{
          if(seat.type==0){
            seat.selected=!seat.selected
          }
        }
      }
    }
    // console.log(this.seats);
    this.draw()
  })
  }
  // 绘制canvas的内容
  draw(){
    // 清除
    this.cvs.clearRect(0,0,this.canvas.width,this.canvas.height)
    // 绘制每一个座位
    for(let i=0;i<this.rows;i++){
      for(let j=0;j<this.cols;j++){
          // 根据选中状态 改变座位样式
          let seat=this.seats[i][j]
          // 根据座位类型设置颜色
          if(seat.type==1){
            // 普通座位 设置为红色
            this.cvs.fillStyle='#a11'
            this.cvs.fillRect(j*this.seatSize+(j+1)*this.margin,i*this.seatSize+(i+1)*this.margin,this.seatSize,this.seatSize)
            continue;
          }
          if(seat.type==2){
            // 普通座位 设置为红色
            this.cvs.fillStyle='#3333'
            this.cvs.fillRect(j*this.seatSize+(j+1)*this.margin,i*this.seatSize+(i+1)*this.margin,this.seatSize,this.seatSize)
            continue;
          }
          // 根据座位选中未选中设置颜色
          if(seat.selected){
            this.cvs.fillStyle='#36d'
            this.cvs.fillRect(j*this.seatSize+(j+1)*this.margin,i*this.seatSize+(i+1)*this.margin,this.seatSize,this.seatSize)
          }else{ this.cvs.fillStyle='#36d6'
          this.cvs.fillRect(j*this.seatSize+(j+1)*this.margin,i*this.seatSize+(i+1)*this.margin,this.seatSize,this.seatSize)
        }  
      }
    }
  }
  // 将所有座位设为未选中
  setNoSelect(){
    for(let i=0;i<this.rows;i++){
      for(let j=0;j<this.cols;j++){
        let seat=this.seats[i][j]
        seat.selected=false 
        seat.type=0
      }  
    }
      this.draw()
  }
  // 将选中位置类型改为普通座位
  setSelectSeatsToNormalSeats(){
    for(let i=0;i<this.rows;i++){
      for(let j=0;j<this.cols;j++){
        let seat=this.seats[i][j]
        if(seat.selected){
          seat.type=1
          // 选中状态设为false
          seat.selected=false
        }
      }  
    }
    this.draw()
  }
  // 选中类型改为过道
  setSelectSeatsToGangway(){
    for(let i=0;i<this.rows;i++){
      for(let j=0;j<this.cols;j++){
        let seat=this.seats[i][j]
        if(seat.selected){
          seat.type=2
          // 选中状态设为false
          seat.selected=false
        }
      }  
    }
    this.draw()
  }
  // 获取座位模板 json字符串
  getSeatTemplateJsonString(){
    let rowNum=0
    for(let i=0;i<this.rows;i++){
      // 判断当前排是不是过道
      // 当前排
      let rowData=this.seats[i]
      let filteredRowData=rowData.filter(item=>{
        return item.type !=2
      })
      if(filteredRowData.length==0){
        continue;
      }
      // 记录排号
      rowNum+=1
      // 记录列号
      let colNum=0
      for(let j=0;j<this.cols;j++){
        let seat=this.seats[i][j]
        if(seat.type==0){
          throw "还有分配的座位"
        }else if(seat.type==1){
          colNum+=1
          seat.name=`${rowNum}排${colNum}号`
        }
      }
    }  
    console.log(this.seats);
    let str=JSON.stringify(this.seats)
    return str  
  }
  // 获取模板中座位数量
  getSeatCount(){
    let count=0
    for(let i=0;i<this.rows;i++){
      for(let j=0;j<this.cols;j++){
        let seat=this.seats[i][j]
        if(seat.type==1){
         count++
        }
      }  
    }
    return count
  }
}
export default SeatSelector